<template>
  <div>
    <top-login></top-login>
    <nav-top></nav-top>
    <div class="painting">

      <div class="container">
        <!-- 轮播图 -->
        <div class="banner">
          <el-carousel height="338px">
            <el-carousel-item v-for="item in banners" :key="item.id">
              <h3 class="small"><img :src="item.bannerimg" alt="" /></h3>
            </el-carousel-item>
          </el-carousel>
        </div>

        <!-- 课程选择 -->
        <div class="clesson">
          <ul class="clearfix">
            <li v-for="item in choose" :key="item.id">
              <img :src="item.img" alt="" />
              <h6>{{ item.title }}</h6>
            </li>
          </ul>
        </div>

        <!-- 首页推荐文案 -->
        <div class="first clearfix">
          <div class="left fl">
            <h5>首页推荐</h5>
          </div>

          <div class="right fr">
            <ul class="clearfix">
              <li>
                <h6>推荐</h6>
              </li>
              <li>
                <h6>精选</h6>
              </li>
            </ul>
          </div>
        </div>

        <!-- 首页推荐选项 -->
        <div class="first-nav">
          <ul class="clearfix">
            <li v-for="item in recommended" :key="item.id"  @click="uid(item.id)">
              <div class="img">
                <i></i>
                <i></i>
                
                <!-- 封面图片 -->
                <img :src="item.imgs" alt="" />
                <!-- 搜索图标 -->
                <div class="search">
                  <i></i>
                </div>
              </div>

              <!-- 文本 -->
              <div class="text">
                <ul class="clearfix">
                  <li>
                    <h6>
                      <!-- 多少人看 -->
                      <i></i>
                      {{ item.look }}
                    </h6>
                  </li>
                  <li>
                    <h6>
                      <!-- 多少人喜欢 -->
                      <i></i>
                      {{ item.like }}
                    </h6>
                  </li>
                  <!-- 有多少图，若只有一张不显示，否则显示图片数量 -->
                  <li v-if="item.much != 1">
                    <h6>{{ item.much }}</h6>
                  </li>
                </ul>

                <!-- 作品名 -->
                <h5>{{ item.title }}</h5>

                <!-- 作者/发布时间/头像 -->
                <div class="text2 clearfix">
                  <i><img :src="item.head" alt="" /></i>
                  <h6>{{ item.author }}</h6>
                  <h5>{{ item.time }}</h5>
                </div>
              </div>
            </li>
          </ul>
        </div>

        <!-- 第二个轮播图 -->
        <div class="second">
          <el-carousel height="226px">
            <el-carousel-item v-for="item in banners2" :key="item.id">
              <h3 class="small">
                <img :src="item.imgs" alt="" class="second" />
              </h3>
            </el-carousel-item>
          </el-carousel>
        </div>

        <!-- 最近推荐作品文案 -->
        <div class="third clearfix">
          <div class="left fl">
            <h4>最近推荐作品</h4>
          </div>

          <div class="right fr">
            <ul class="clearfix">
              <li>
                <h6>更多</h6>
              </li>
            </ul>
          </div>
        </div>

        <!-- 最近推荐作品 -->
        <div class="forth clearfix">
          <ul>
            <li v-for="item in photo" :key="item.t">
              <img :src="item.img" alt="" />
            </li>
          </ul>
        </div>

        <!-- 热门作品文案 -->
        <div class="fifth clearfix">
          <div class="left fl">
            <h4>热门作品</h4>
          </div>

          <div class="right fr">
            <ul class="clearfix">
              <li>
                <h6>更多</h6>
              </li>
            </ul>
          </div>
        </div>

        <!-- 热门作品 -->
        <div class="sixth clearfix">
                <ul>
                    <li v-for="item in hot" :key="item.id"><img :src="item.imgs" alt=""></li>
                </ul>
        </div>

        <!-- 近期活动比赛文案 -->
        <div class="sevent clearfix">
                <div class="left fl">
                    <h4>近期活动比赛</h4>
                </div>

                <div class="right fr">
                    <ul class="clearfix">
                        <li>
                            <h6>更多</h6>
                        </li>

                    </ul>
                </div>
        </div>

        <!-- 近期比赛 -->
        <div class="eight clearfix">
                <ul class="clearfix">
                    <li v-for="item in competition" :key="item.id">
                        <img :src="item.imgs" alt="">
                        <h6>{{item.title}}</h6>
                        <h5>
                            <i></i>
                            奖励规模
                            <span>{{item.bottom}}</span>

                        </h5>
                    </li>
                    
                </ul>
        </div>

        <!-- 近期开课文案 -->
        <div class="ninth clearfix">
                <div class="left fl">
                    <h4>最近开课</h4>
                </div>

                <div class="right fr">
                    <ul class="clearfix">
                        <li>
                            <h6>更多</h6>
                        </li>

                    </ul>
                </div>
        </div>

        <!-- 近期开课 -->
        <div class="ten clearfix">
                <ul class="clearfix">
                    <li v-for="item in classing" :key="item.id"><img :src="item.imgs" alt=""></li>
                </ul>
        </div>
      </div>

      <bottom-login></bottom-login>
    </div>
  </div>
</template>

<script>
import { getJsonData } from "../api/home.js";
import { getfoodData } from "../api/home.js";
import topLogin from "../components/topLogin";
import navTop from "../components/navTop";
import bottomLogin from "../components/bottomLogin";
export default {
  data() {
    return {
      // 第一个轮播图数据
      banners: null,
      // 第二个轮播图数据
      banners2: null,
      // 课程选择
      choose: null,
      //作品介绍
      recommended: null,
      //近期作品
      Recently: null,
      //热门作品
      hot: null,
      //近期比赛
      competition:null,
      //近期开课
      classing:null,
      //api别的数据
      photo: '',
      
    };
  },
  methods:{
    uid(id){
      // let index = this.recommended.findIndex((item) => item.id == this.recommended[index].id);
      let index = this.recommended.findIndex((item)=>item.id==id)
      this.$router.push({path:"/work",query:{index}})
    },
    getfoodDataFun(){
      getfoodData().then((data)=>{
        console.log(data);
        console.log(data.result.rfs);
        this.photo=data.result.rfs
        console.log(this.photo);
        //切割片段
        this.photo=this.photo.slice(0,6)
        console.log(this.photo);
      })
    }
  },

  components: {
    topLogin,
    bottomLogin,
    navTop,
  },
  created() {
    //请求方法
    this.getfoodDataFun()
    document.documentElement.scrollTop=0
    //获得文字数据
    getJsonData().then((data) => {
      // console.log(data.lists[0].choose);
      this.banners = data.banners;
      this.banners2 = data.banners2;
      this.choose = data.choose;
      this.recommended = data.recommended;
      this.Recently = data.Recently;
      this.hot = data.hot;
      this.competition = data.competition;
      this.classing = data.classing;
    });
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/base.css";

.container .banner {
  position: relative;
  margin-top: 10px;
}
// 走马灯
.banner > .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
.el-carousel__item h3 img {
  width: 1170px;
  height: 338px;
}
::v-deep .el-carousel__arrow {
  width: 40px;
  height: 60px;
  border-radius: 3px;
  font-size: 45px;
}
// 课程选择
.container .clesson {
  margin-top: 33px;
}

.container .clesson ul li {
  float: left;
  width: 274px;
  height: 165px;
  border-radius: 3px;
  overflow: hidden;
  margin-right: 24px;
}

.container .clesson ul li:nth-child(4) {
  margin-right: 0px;
}

.container .clesson ul li img {
  width: 274px;
  height: 130px;
}

.container .clesson ul li h6 {
  color: #fffdfa;
  background-color: #353a40;
  height: 36px;
  line-height: 36px;
  margin-top: -5px;
  text-align: center;
  border-bottom: 1px solid #8c8d91;
  border-left: 1px solid #8c8d91;
  border-right: 1px solid #8c8d91;
}
//首页推荐文本
.container .first {
  margin-top: 7px;
}

.container .first .left {
  color: #363441;
}

.container .first .left h5 {
  font-weight: bold;
  height: 58px;
  line-height: 58px;
}

.container .first .right ul {
  margin-top: 20px;
}

.container .first .right ul li {
  float: left;
  width: 54px;
  height: 25px;
  line-height: 25px;
  margin-left: 7px;
  border-radius: 12px;
  border: 1px solid #dbe4df;
  text-align: center;
  color: #221a25;
}

// 首页推荐作品

.first-nav ul li {
  float: left;
  margin-bottom: 21px;
  margin-right: 23px;
}

.first-nav ul li:nth-child(4n) {
  margin-right: 0px;
}

.first-nav ul li .img {
  position: relative;
}

.first-nav ul li .img:hover .search {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 3px;
  background-color: #ffffff;
  transition: all 0.3s linear;
  opacity: 1;
}
.first-nav ul li .img .search {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 3px;
  background-color: #ffffff;
  transition: all 0.3s linear;
  opacity: 1;
  opacity: 0;
}
.first-nav ul li .img .search i {
  display: block;
  background-image: url(../assets/img/smlogo/search.png);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  margin: 5px;
}

.first-nav ul li .img > i:nth-child(2) {
  display: block;
  width: 22px;
  height: 22px;
  position: absolute;
  // background-image: url(../img/work_jingxuan.png);
  background-size: 22px 22px;
  top: 5px;
  left: 5px;
}

.first-nav ul li .img > i:nth-child(1) {
  display: block;
  width: 22px;
  height: 22px;
  position: absolute;
  // background-image: url(../img/work_hot.png);
  background-size: 22px 22px;
  top: 5px;
  left: 30px;
}

.first-nav ul li .img img {
  width: 275px;
  height: 275px;
  border-radius: 3px;
}

.first-nav ul li .text {
  width: 275px;
  background-color: #f8f9fb;
  margin-top: -3px;
}

.first-nav ul li .text ul {
  padding-top: 10px;
}

.first-nav ul li .text ul li h6 {
  height: 20px;
  line-height: 20px;
}

.first-nav ul li .text ul li:nth-child(1) i {
  display: inline-block;
  background: url(../assets/img/smlogo/see.png) no-repeat;
  width: 15px;
  height: 12px;
  background-size: 15px 12px;
}

.first-nav ul li .text ul li:nth-child(1) {
  font-size: 12px;
  color: #92959a;
  float: left;
  margin-left: 15px;
}

.first-nav ul li .text ul li:nth-child(2) i {
  display: inline-block;
  background: url(../assets/img/smlogo/like.png) no-repeat;
  width: 12px;
  height: 12px;
  background-size: 12px 12px;
}

.first-nav ul li .text ul li:nth-child(2) {
  font-size: 12px;
  color: #92959a;
  float: left;
  margin-left: 15px;
}

.first-nav ul li .text ul li:nth-child(3) {
  width: 30px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  float: right;
  background-color: #ffd65b;
  border-radius: 3px;
  color: #856b16;
  margin-right: 7px;
}

.first-nav ul li .text > h5 {
  font-weight: bold;
  height: 40px;
  line-height: 40px;
  margin-left: 15px;
  color: #3b3c36;
}

.first-nav ul li .text .text2 i img {
  display: inline-block;
  // background: url(../img/head.jpg!50x50) no-repeat;
  width: 25px;
  height: 25px;
  background-size: 25px 25px;
  border-radius: 50%;
  float: left;
  margin-left: 15px;
  border: 1px solid #f0f1f3;
}

.first-nav ul li .text .text2 h6 {
  float: left;
  color: #8e8f93;
  height: 22px;
  line-height: 22px;
  margin-left: 8px;
}

.first-nav ul li .text .text2 h5 {
  float: right;
  color: #8e8f93;
  height: 22px;
  line-height: 22px;
  margin-right: 7px;
}
.first-nav ul li .text .text2 {
  padding-bottom: 10px;
}

// 第二个轮播图
.el-carousel__item h3 .second {
  width: 1170px;
  height: 226px;
}
.second {
  // margin-top: 22px;
  position: relative;
}
//最近推荐作品文案
.third .left {
  color: #363441;
}

.third .left h4 {
  font-weight: bold;
  height: 58px;
  line-height: 58px;
}

.third .right ul {
  margin-top: 20px;
}

.third .right ul li {
  float: left;
  width: 54px;
  height: 25px;
  line-height: 25px;
  margin-left: 7px;
  border-radius: 12px;
  border: 1px solid #dbe4df;
  text-align: center;
  color: #221a25;
}
// 最近推荐作品
.forth ul li {
  float: left;
  margin-right: 14px;
  margin-bottom: 10px;
}
.forth ul li:nth-child(6n) {
  margin-right: 0px;
}
.forth ul li img {
  width: 183px;
  height: 183px;
}
//热门作品文案
.fifth{
    margin-top: 15px;
}
.fifth .left {
    color: #363441;
}

.fifth .left h4 {
    font-weight: bold;
    height: 58px;
    line-height: 58px;
}

.fifth .right ul {
    margin-top: 20px;
}

.fifth .right ul li {
    float: left;
    width: 54px;
    height: 25px;
    line-height: 25px;
    margin-left: 7px;
    border-radius: 12px;
    border: 1px solid #dbe4df;
    text-align: center;
    color: #221a25;
}
//热门作品
.sixth ul li{
    float: left;
    margin-right: 14px;
    margin-bottom: 10px;
}
.sixth ul li:nth-child(6n){
    margin-right: 0px;
}
.sixth ul li img{
    width: 183px;
    height: 183px;

}
//近期活动比赛文案
.sevent{
    margin-top: 15px;
}
.sevent .left {
    color: #363441;
}

.sevent .left h4 {
    font-weight: bold;
    height: 58px;
    line-height: 58px;
}

.sevent .right ul {
    margin-top: 20px;
}

.sevent .right ul li {
    float: left;
    width: 54px;
    height: 25px;
    line-height: 25px;
    margin-left: 7px;
    border-radius: 12px;
    border: 1px solid #dbe4df;
    text-align: center;
    color: #221a25;
}
// 近期比赛
.eight ul li{
    border: 1px solid #f1f1f1;
    float: left;
    margin-right: 25px;
}
.eight ul li:nth-child(3){
    margin-right: 0px;
}
.eight ul li img{
    width: 370px;
    height: 222px;

}
.eight ul li h6{
    text-align: center;
    height: 47px;
    line-height: 47px;
    color: #3b2a32;
    font-size: 14px;
    border-bottom: 1px solid #f1f1f1 ;
}
.eight ul li h5{
    color: #bebebe;
    font-size: 12px;
    height: 50px;
    line-height: 50px;
    position: relative;
    padding-left: 50px;
}
.eight ul li h5 span{
    color: #e13855;
    font-weight: 600;
}
.eight ul li h5 i{
    position: absolute;
    display: block;
    background-image: url(../assets/img/smlogo/gift.png);
    width: 21px;
    height: 21px;
    background-size: 21px 21px;
    left: 23px;
    top: 15px;
}
// 近期开课文案
.ninth{
    margin-top: 15px;
}
.ninth .left {
    color: #363441;
}

.ninth .left h4 {
    font-weight: bold;
    height: 58px;
    line-height: 58px;
}

.ninth .right ul {
    margin-top: 20px;
}

.ninth .right ul li {
    float: left;
    width: 54px;
    height: 25px;
    line-height: 25px;
    margin-left: 7px;
    border-radius: 12px;
    border: 1px solid #dbe4df;
    text-align: center;
    color: #221a25;
}
//近期开课
.ten{
    margin-bottom: 35px;
}
.ten ul li{
    float: left;
    margin-right: 30px;
}
.ten ul li:nth-child(4){
    margin-right: 0px;
}
.ten ul li img{
    width: 270px;
    height: 163px;
}
</style>